<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main flow-form-main liucheng">
      <div class="jsbos-common-page-header">
        <el-page-header @back="goBack" :content="title" style="width: 80%" />
        <div v-if="isProcessed == 0" class="options">
          <el-button
            type="primary"
            @click="addComment"
            v-if="activeTab === 'comment'"
            >评 论</el-button
          >
          <template v-if="setting.opType != 4 && setting.id">
            <el-button
              type="primary"
              @click="printBrowseVisible = true"
              v-if="properties.hasPrintBtn && properties.printId"
              >{{ properties.printBtnText || "打 印" }}</el-button
            >
          </template>

          <template v-if="setting.opType == '-1'">
            <el-button
              type="primary"
              @click="eventLauncher('submit')"
              :loading="candidateLoading"
              :disabled="allBtnDisabled"
              >{{ properties.submitBtnText || "提 交" }}</el-button
            >
            <el-button
              type="warning"
              @click="eventLauncher('save')"
              v-if="properties.hasSaveBtn"
              :loading="btnLoading || candidateLoading"
              :disabled="allBtnDisabled"
              >{{ properties.saveBtnText || "暂 存" }}</el-button
            >
          </template>
          <template v-if="setting.opType == 1">
            <el-button
              type="warning"
              @click="openUserBox('transfer')"
              v-if="
                properties.hasTransferBtn &&
                alreadyVerify &&
                flowTaskInfo.thisStep.indexOf('加签') == -1
              "
              >{{ properties.transferBtnText || "转 审" }}</el-button
            >
            <el-button
              type="primary"
              @click="eventLauncher('audit')"
              :loading="candidateLoading"
              v-if="properties.hasAuditBtn && alreadyVerify"
              >{{ properties.auditBtnText || "通 过" }}</el-button
            >
            <el-button
              type="warning"
              @click="eventLauncher('saveAudit')"
              v-if="properties.hasSaveBtn"
              :loading="btnLoading"
              >{{ properties.saveBtnText || "暂 存" }}</el-button
            >
            <el-button
              type="danger"
              @click="eventReceiver({}, 'reject')"
              v-if="
                properties.hasRejectBtn &&
                alreadyVerify &&
                flowTaskInfo.thisStep.indexOf('加签') == -1
              "
              >{{ properties.rejectBtnText || "驳 回" }}</el-button
            >

            <el-button
              type="primary"
              @click="freeApproverVisible = true"
              :loading="candidateLoading"
              v-if="properties.hasFreeApprover"
              >{{ properties.freeApproverBtnText || "加 签" }}
            </el-button>
          </template>
          <template v-if="setting.opType == 0 && setting.status == 1">
            <el-button
              type="primary"
              @click="press()"
              v-if="
                properties.hasPressBtn || properties.hasPressBtn === undefined
              "
            >
              {{ properties.pressBtnText || "催 办" }}</el-button
            >
            <el-button
              type="danger"
              @click="revoke()"
              :loading="btnLoading"
              v-if="
                properties.hasRevokeBtn || properties.hasRevokeBtn === undefined
              "
              >{{ properties.revokeBtnText || "撤 回" }}</el-button
            >
          </template>
          <template v-if="setting.opType == 4">
            <el-button
              type="primary"
              @click="openAssignBox"
              v-if="setting.status == 1"
              >指 派</el-button
            >
            <el-button
              type="danger"
              v-if="setting.status != 2 && setting.status != 5"
              @click="cancel()"
              >终 止</el-button
            >
          </template>
          <el-button
            @click="goBack()"
            v-if="!setting.hideCancelBtn"
            :disabled="allBtnDisabled"
            >{{ $t("common.cancelButton") }}</el-button
          >
        </div>
      </div>
      <div
        class="approve-result"
        v-if="(setting.opType == 0 || setting.opType == 4) && activeTab === '0'"
      >
        <div
          class="approve-result-img"
          :class="flowTaskInfo.status | flowStatus()"
        ></div>
      </div>
      <el-tabs class="jsbos-el_tabs" v-model="activeTab" v-loading="loading">
        <el-tab-pane label="申请内容" v-loading="loading">
          <component
            :is="currentView"
            :data="dataTransfer"
            @close="goBack"
            ref="form"
            @eventReceiver="eventReceiver"
            @setLoad="setLoad"
            @setCandidateLoad="setCandidateLoad"
            @setPageLoad="setPageLoad"
          />
        </el-tab-pane>
        <el-tab-pane
          label="审批记录"
          v-if="setting.opType != '-1'"
          v-loading="loading"
        >
          <recordList :list="flowTaskOperatorRecordList" :endTime="endTime" />
        </el-tab-pane>
        <el-tab-pane
          label="审批汇总"
          v-if="setting.opType != '-1' && isSummary"
          v-loading="loading"
          name="recordSummary"
        >
          <RecordSummary
            :id="setting.id"
            :summaryType="summaryType"
            ref="recordSummary"
          />
        </el-tab-pane>
        <el-tab-pane label="审批流程" v-loading="loading">
          <el-button
            type="primary"
            size="mini"
            class="btn_style"
            @click="cutBtnHandle"
            >{{ cutShow ? "查看审批节点" : "查看全部流程" }}</el-button
          >
          <Process
            :conf="flowTemplateJson"
            v-if="flowTemplateJson.nodeId && cutShow"
          />
          <ProcessPreview :conf="flowTaskNodeList" v-else />
          <!-- </div> -->
        </el-tab-pane>
        <el-tab-pane
          label="流程评论"
          v-if="setting.opType != '-1' && isComment"
          v-loading="loading"
          name="comment"
        >
          <Comment :id="setting.id" ref="comment" />
        </el-tab-pane>
      </el-tabs>
      <el-dialog
        :title="eventType === 'audit' ? '审批通过' : '审批驳回'"
        :close-on-click-modal="false"
        :visible.sync="visible"
        class="jsbos-dialog jsbos-dialog_center"
        lock-scroll
        append-to-body
        width="600px"
      >
        <el-form label-width="80px" ref="candidateForm" :model="candidateForm">
          <template v-if="eventType === 'audit'">
            <el-form-item
              :label="item.nodeName + item.label"
              :prop="'candidateList.' + i + '.value'"
              v-for="(item, i) in candidateForm.candidateList"
              :key="i"
              :rules="item.rules"
            >
              <candidate-user-select
                v-model="item.value"
                multiple
                :placeholder="'请选择' + item.label"
                :taskId="setting.taskId"
                :formData="formData"
                :nodeId="item.nodeId"
              />
            </el-form-item>
          </template>
          <el-form-item label="审批意见">
            <el-input
              v-model="reason"
              placeholder="请输入审批意见（选填）"
              type="textarea"
              :rows="4"
            />
          </el-form-item>
          <el-form-item label="审批签名" v-if="properties.hasSign">
            <div class="sign-main">
              <div class="sign-head">
                <div class="sign-tip">请在这里输入你的签名</div>
                <div class="sign-action">
                  <el-button class="clear-btn" size="mini" @click="handleReset"
                    >清空</el-button
                  >
                  <el-button
                    class="sure-btn"
                    size="mini"
                    @click="handleGenerate"
                    :disabled="!!signImg"
                    >确定签名</el-button
                  >
                </div>
              </div>
              <div class="sign-box">
                <vue-esign
                  ref="esign"
                  :height="330"
                  v-if="!signImg"
                  :lineWidth="5"
                />
                <img :src="signImg" alt v-if="signImg" class="sign-img" />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="抄送人员" v-if="properties.isCustomCopy">
            <user-select v-model="copyIds" placeholder="请选择" multiple />
          </el-form-item>
          <el-form-item label="上传附件:">
            <UploadFz
              :fileSize="1024"
              sizeUnit="MB"
              :limit="5"
              v-model="handleFiles"
              @change="uploadFile"
              :showPdfBtn="false"
            ></UploadFz>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">
            {{ $t("common.cancelButton") }}
          </el-button>
          <el-button
            type="primary"
            @click="handleApproval()"
            :loading="approvalBtnLoading"
            >{{ $t("common.confirmButton") }}</el-button
          >
        </span>
      </el-dialog>
      <el-dialog
        title="加签"
        :close-on-click-modal="false"
        :visible.sync="freeApproverVisible"
        class="jsbos-dialog jsbos-dialog_center"
        lock-scroll
        append-to-body
        width="600px"
      >
        <el-form
          label-width="80px"
          ref="freeApproverForm"
          :model="freeApproverForm"
          :rules="freeApproverRules"
        >
          <!-- <el-form-item label="加签方式" v-if="properties.hasFreeApprover">
            <el-radio-group v-model="freeApproverForm.freeApproverType">
              <el-radio-button label="before">在我之前</el-radio-button>
              <el-radio-button label="after">在我之后</el-radio-button>
            </el-radio-group>
          </el-form-item> -->
          <el-form-item label="审批意见">
            <el-input
              v-model="reason"
              placeholder="请输入审批意见（选填）"
              type="textarea"
              :rows="4"
            />
          </el-form-item>

          <el-form-item label="加签方式">
            <el-radio v-model="freeApproverForm.counterSign" :label="0">
              或签
              <el-tooltip
                content="设置一名或者多名审批人员，任意一名审批人员即可审核通过"
                placement="top"
              >
                <i class="el-icon-warning-outline"></i>
              </el-tooltip>
            </el-radio>

            <el-radio v-model="freeApproverForm.counterSign" :label="1">
              会签
              <el-tooltip
                content="设置多名审批人员，所有审批人员均需审核才可通过"
                placement="top"
              >
                <i class="el-icon-warning-outline"></i>
              </el-tooltip>
            </el-radio>
          </el-form-item>
          <el-form-item label="加签人员" v-if="properties.hasFreeApprover">
            <user-select
              v-model="freeApproverForm.freeApproverUserId"
              placeholder="请选择加签人员,不选即该节点审核结束"
              multiple
            />
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="freeApproverVisible = false">{{
            $t("common.cancelButton")
          }}</el-button>
          <el-button
            type="primary"
            @click="handleFreeApproval()"
            :loading="approvalBtnLoading"
          >
            {{ $t("common.confirmButton") }}
          </el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="指派"
        :close-on-click-modal="false"
        :visible.sync="assignVisible"
        class="jsbos-dialog jsbos-dialog_center"
        lock-scroll
        append-to-body
        width="600px"
      >
        <el-form
          label-width="80px"
          :model="assignForm"
          :rules="assignRules"
          ref="assignForm"
        >
          <el-form-item label="指派节点" prop="nodeCode">
            <el-select
              v-model="assignForm.nodeCode"
              placeholder="请选择指派节点"
            >
              <el-option
                v-for="item in assignNodeList"
                :key="item.nodeCode"
                :label="item.nodeName"
                :value="item.nodeCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="指派给谁" prop="freeApproverUserId">
            <user-select
              v-model="assignForm.freeApproverUserId"
              placeholder="请选择指派给谁"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="assignVisible = false">
            {{ $t("common.cancelButton") }}
          </el-button>
          <el-button type="primary" @click="handleAssign()">{{
            $t("common.confirmButton")
          }}</el-button>
        </span>
      </el-dialog>
      <UserBox
        v-if="userBoxVisible"
        ref="userBox"
        :title="userBoxTitle"
        @submit="handleTransfer"
      />
      <print-browse
        :visible.sync="printBrowseVisible"
        :id="properties.printId"
        :formId="setting.id"
        :fullName="setting.fullName"
      />
      <candidate-form
        :visible.sync="candidateVisible"
        :candidateList="candidateList"
        :taskId="setting.taskId"
        :formData="formData"
        @submitCandidate="submitCandidate"
      />
    </div>
  </transition>
</template>

<script>
import { FlowEngineInfo } from "@/api/workFlow/FlowEngine";
import {
  FlowBeforeInfo,
  FlowBeforeDraftTaskInfo,
  Audit,
  freeApproval,
  Reject,
  Transfer,
  Recall,
  Cancel,
  Assign,
  SaveAudit,
  Candidates,
  CandidateUser,
} from "@/api/workFlow/FlowBefore";
import { Revoke, Press } from "@/api/workFlow/FlowLaunch";
import {
  Create,
  Update,
  DynamicCreate,
  DynamicUpdate,
} from "@/api/workFlow/workFlowForm";
import recordList from "./RecordList";
import Comment from "./Comment";
import RecordSummary from "./RecordSummary";
import CandidateForm from "./CandidateForm";
import CandidateUserSelect from "./CandidateUserSelect";
import Process from "@/components/Process/Preview";
import ProcessPreview from "@/components/Process/flowPreview";
import UploadFz from "@/components/Generator/components/Upload/UploadFz.vue";
import PrintBrowse from "@/components/PrintBrowse";
import vueEsign from "vue-esign";
import { status } from "nprogress";
export default {
  components: {
    recordList,
    Process,
    vueEsign,
    PrintBrowse,
    Comment,
    RecordSummary,
    CandidateForm,
    CandidateUserSelect,
    ProcessPreview,
    UploadFz,
  },
  props: {
    data: {
      type: Object,
      required: false,
    },
  },
  data() {
    return {
      // useSelectShow: true,
      // multipleType: false,
      //控制按钮，已审核的不显示
      alreadyVerify: true,
      // cutShow控制流程显示
      cutShow: false,
      btnDisabled: "",
      dataTransfer: this.data,
      userBoxVisible: false,
      userBoxTitle: "审批人",
      assignVisible: false,
      assignForm: {
        nodeCode: "",
        freeApproverUserId: "",
      },
      assignRules: {
        nodeCode: [
          { required: true, message: "请选择指派节点", trigger: "change" },
        ],
        freeApproverUserId: [
          { required: true, message: "请选择指派给谁", trigger: "click" },
        ],
      },

      freeApproverVisible: false,
      freeApproverForm: {
        freeApproverType: "before",
        counterSign: 0,
        freeApproverUserId: "",
      },
      freeApproverRules: {
        freeApproverType: [
          { required: true, message: "请选择加签方式", trigger: "click" },
        ],
        freeApproverUserId: [
          { required: true, message: "请选择加签人员", trigger: "click" },
        ],
      },
      assignNodeList: [],

      currentView: "",
      formData: {},
      setting: {},
      flowFormInfo: {},
      flowTaskInfo: {},
      flowTaskNodeList: [],
      flowTemplateJson: {},
      flowTaskOperatorRecordList: [],
      properties: {},
      endTime: 0,
      visible: false,
      reason: "",
      handleFiles: [],
      customFiled: "",
      handleId: "",
      activeTab: "0",
      isComment: false,
      isSummary: false,
      summaryType: 0,
      loading: false,
      btnLoading: false,
      approvalBtnLoading: false,
      candidateLoading: false,
      candidateVisible: false,
      candidateList: [],
      candidateForm: {
        candidateList: [],
      },
      printBrowseVisible: false,
      eventType: "",
      signImg: "",
      copyIds: [],
      fullName: "",
      thisStep: "",
      allBtnDisabled: false,
      isProcessed: 0,
    };
  },
  created() {},
  computed: {
    title() {
      if ([2, 3, 4].includes(this.setting.opType)) return this.fullName;
      return this.thisStep
        ? // ? this.fullName + "/" + this.thisStep
          this.fullName
        : this.fullName;
    },
  },
  watch: {
    activeTab(val) {
      if (val === "comment") {
        this.$refs.comment && this.$refs.comment.init();
      }
      if (val === "recordSummary") {
        this.$refs.recordSummary && this.$refs.recordSummary.init();
      }
    },
    // "freeApproverForm.counterSign"(newData, oldData) {
    //   console.log(newData, oldData)
    //   this.useSelectShow = false
    //   if(newData == 1) {
    //     this.multipleType = true
    //     this.useSelectShow = true
    //   }else {
    //     this.multipleType = false
    //     this.useSelectShow = true
    //   }
    // }
  },
  methods: {
    // 审核通过返回过来的节点进行展示按钮
    checkStatus(data, checkData) {
      let nodeList = checkData.filter((r) => r.nodeCode == data.thisStepId)[0];
      // if (nodeList) {
      //   if (nodeList.handleId == this.$store.state.user.userInfo.userId && this.setting.taskOperatorId == nodeList.id) { } else {
      //     this.setting.opType = 3;
      //     this.$message({
      //       message: "当前审批信息已经变化，暂不需要审批!",
      //       type: "warning",
      //       duration: 1500,
      //       onClose: () => { },
      //     });
      //   }
      // }

      let enableMark = data.status;
      if (enableMark == "1") {
      } else {
        this.setting.opType = 3;
        this.$message({
          message: "当前审批信息已经变化，暂不需要审批!",
          type: "warning",
          duration: 1500,
          onClose: () => {},
        });
      }
    },
    cutBtnHandle() {
      this.cutShow = !this.cutShow;
    },
    goBack(isRefresh) {
      this.$emit("close", isRefresh);
    },
    init(data) {
      this.activeTab = "0";
      this.setting = data;
      this.loading = true;
      /**
       * opType
       * -1 - 我发起的新建/编辑
       * 0 - 我发起的详情
       * 1 - 待办事宜
       * 2 - 已办事宜
       * 3 - 抄送事宜
       * 4 - 流程监控
       */
      if (this.setting.opType == "-1" && !this.setting.id) {
        this.getEngineInfo(data);
      } else {
        if (data.taskId) {
          this.getBeforeInfo(data);
        } else {
          //业务列表上点开，没有绑定taskId
          this.getFlowBeforeDraftTaskInfo(data);
        }
      }
    },
    getEngineInfo(data) {
      FlowEngineInfo(data.flowId)
        .then((res) => {
          data.type = res.data.type;
          data.fullName = res.data.fullName;
          this.fullName = res.data.fullName;
          if (data.formType == 1) {
            if (res.data.formUrl) {
              const formUrl = res.data.formUrl.replace(/\s*/g, "");
              console.log("res.data.formUrl" + res.data.formUrl);
              this.currentView = (resolve) =>
                require([`@/views/${formUrl}`], resolve);
            } else {
              this.currentView = (resolve) =>
                require([
                  `@/views/workFlow/workFlowForm/${data.enCode}`,
                ], resolve);
            }
          } else {
            this.currentView = (resolve) =>
              require([`@/views/workFlow/workFlowForm/dynamicForm`], resolve);
          }

          data.formConf = res.data.formData;
          this.flowTemplateJson = res.data.flowTemplateJson
            ? JSON.parse(res.data.flowTemplateJson)
            : null;
          this.flowTemplateJson.state = "state-curr";
          data.formOperates = [];
          this.properties =
            (this.flowTemplateJson && this.flowTemplateJson.properties) || {};
          if (
            this.flowTemplateJson &&
            this.flowTemplateJson.properties &&
            this.flowTemplateJson.properties.formOperates
          ) {
            data.formOperates =
              this.flowTemplateJson.properties.formOperates || [];
          }
          //初始化页面
          this.initForm(data);
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getFlowBeforeDraftTaskInfo(data) {
      console.log(data, "=======______");
      //业务列表上点开，没有绑定taskId,根据业务主键查询任务信息
      FlowBeforeDraftTaskInfo(data.processId).then((res) => {
        data.taskId = res.data.id;
        this.getBeforeInfo(data);
      });
    },
    getBeforeInfo(data) {
      FlowBeforeInfo(data.taskId, {
        taskNodeId: data.taskNodeId,
        taskOperatorId: data.taskOperatorId,
      })
        .then((res) => {
          let userIds = res.data.flowTaskOperatorRecordList.map((i) => {
            return i.handleId;
          });
          if (data.ischeck) {
            this.checkStatus(
              res.data.flowTaskInfo,
              res.data.flowTaskOperatorList
            );
          }
          //判断是否存在flowtaskinfo
          if (!data.status) {
            data.status = res.data.flowTaskInfo.status;
          }

          let status = false;
          res.data.flowTaskOperatorList.forEach((item) => {
            if (item.id == this.setting.taskOperatorId) {
              status = true;
              this.isProcessed = item.completion;
            }
          });
          if (!status) {
            if (!res.data.flowTaskOperatorList.length) {
              // this.isProcessed = 1;
            } else {
              this.isProcessed = 0;
            }
          }
          this.flowFormInfo = res.data.flowFormInfo;
          this.flowTaskInfo = res.data.flowTaskInfo;
          data.fullName = this.flowTaskInfo.fullName;
          this.fullName = this.flowTaskInfo.fullName;
          this.thisStep = this.flowTaskInfo.thisStep;
          data.type = this.flowTaskInfo.type;
          data.draftData = res.data.draftData || null;
          if (data.formType == 1) {
            if (this.flowTaskInfo.formUrl) {
              this.currentView = (resolve) =>
                require([`@/views/${this.flowTaskInfo.formUrl}`], resolve);
            } else {
              this.currentView = (resolve) =>
                require([
                  `@/views/workFlow/workFlowForm/${data.enCode}`,
                ], resolve);
            }
          } else {
            this.currentView = (resolve) =>
              require([`@/views/workFlow/workFlowForm/dynamicForm`], resolve);
          }
          this.flowTaskNodeList = res.data.flowTaskNodeList;
          if (this.flowTaskNodeList.length > 0) {
            this.flowTaskNodeList.forEach((item) => {
              if (item.userName) {
                if (item.userName.split(",").length > 1) {
                  let arr = item.userName.split(",");
                  for (let i in arr) {
                    arr[i] = arr[i].split("/")[0];
                  }
                  arr = arr.join(",");
                  item.userName = arr;
                } else {
                  item.userName = item.userName.split("/")[0];
                }
              }
            });
          }
          this.flowTemplateJson = this.flowTaskInfo.flowTemplateJson
            ? JSON.parse(this.flowTaskInfo.flowTemplateJson)
            : null;
          this.isComment = this.flowTemplateJson.properties.isComment;
          this.isSummary = this.flowTemplateJson.properties.isSummary;
          this.summaryType = this.flowTemplateJson.properties.summaryType;
          this.flowTaskOperatorRecordList = res.data.flowTaskOperatorRecordList;

          this.flowTaskOperatorRecordList.forEach((item) => {
            item.userName = item.userName.split("/")[0];
            item.operatorId = item.operatorId.split("/")[0];
          });

          // 控制按钮显示
          this.properties = res.data.approversProperties || {};

          this.endTime =
            this.flowTaskInfo.completion == 100 ? this.flowTaskInfo.endTime : 0;
          data.formConf = res.data.flowFormInfo;

          /**
           * opType
           * -1 - 我发起的新建/编辑
           * 0 - 我发起的详情
           * 1 - 待办事宜
           * 2 - 已办事宜
           * 3 - 抄送事宜
           * 4 - 流程监控
           */
          if (data.opType != 1 && data.opType != -1) data.readonly = true;
          //初始化
          if (
            this.flowTaskInfo.thisStep &&
            this.flowTaskInfo.thisStep.indexOf("加签") != -1
          ) {
            //加签人 不能编辑，只能查看
            data.readonly = true;
          }
          data.formOperates = [];
          if (data.opType == 0) {
            this.properties =
              (this.flowTemplateJson && this.flowTemplateJson.properties) || {};
            if (
              this.flowTemplateJson &&
              this.flowTemplateJson.properties &&
              this.flowTemplateJson.properties.formOperates
            ) {
              data.formOperates =
                this.flowTemplateJson.properties.formOperates || [];
            }
            for (let i = 0; i < data.formOperates.length; i++) {
              data.formOperates[i].write = false;
            }
          } else {
            data.formOperates = res.data.formOperates || [];
          }
          if (this.flowTaskNodeList.length) {
            let assignNodeList = [];
            for (let i = 0; i < this.flowTaskNodeList.length; i++) {
              const nodeItem = this.flowTaskNodeList[i];
              data.opType == 4 &&
                nodeItem.type == 1 &&
                assignNodeList.push(nodeItem);
              const loop = (data) => {
                if (Array.isArray(data)) data.forEach((d) => loop(d));
                if (data.nodeId === nodeItem.nodeCode) {
                  if (nodeItem.type == 0) data.state = "state-past";
                  if (nodeItem.type == 1) data.state = "state-curr";
                  if (
                    nodeItem.nodeType === "approver" ||
                    nodeItem.nodeType === "start" ||
                    nodeItem.nodeType === "subFlow"
                  )
                    data.content = nodeItem.userName;
                  return;
                }
                if (data.conditionNodes && Array.isArray(data.conditionNodes))
                  loop(data.conditionNodes);
                if (data.childNode) loop(data.childNode);
              };
              loop(this.flowTemplateJson);
            }
            this.assignNodeList = assignNodeList;
          }
          this.initForm(data);
          this.loading = false;
        })
        .catch((msg) => {
          console.error(msg);
          this.loading = false;
        });
    },
    initForm(data) {
      //初始化页面
      var res = () => {
        if (this.$refs.form) {
          this.$refs.form.init(data);
        } else {
          setTimeout(() => {
            res();
          }, 20);
        }
      };
      res();
    },
    eventLauncher(eventType) {
      this.$refs.form && this.$refs.form.dataFormSubmit(eventType);
    },
    eventReceiver(formData, eventType) {
      this.formData = formData;
      this.formData.flowId = this.setting.flowId;
      this.eventType = eventType;
      if (eventType === "save" || eventType === "submit") {
        return this.submitOrSave();
      }
      if (eventType === "saveAudit") {
        return this.saveAudit();
      }
      if (eventType === "audit" || eventType === "reject") {
        this.handleId = "";
        this.reason = "";
        this.copyIds = [];
        this.handleFiles = [];
        this.handleReset();
        if (eventType === "reject") return (this.visible = true);
        this.candidateLoading = true;
        Candidates(this.setting.taskId, { formData: this.formData })
          .then((res) => {
            let data = res.data;
            this.candidateLoading = false;
            if (Array.isArray(data) && data.length) {
              this.candidateForm.candidateList = res.data.map((o) => ({
                ...o,
                label: "审批人",
                value: [],
                rules: [
                  {
                    required: true,
                    message: `审批人不能为空`,
                    trigger: "click",
                  },
                ],
              }));
              this.$nextTick(() => {
                this.$refs["candidateForm"].resetFields();
              });
            } else {
              this.candidateForm.candidateList = [];
            }
            this.visible = true;
          })
          .catch(() => {
            this.candidateLoading = false;
          });
      }
    },
    saveAudit() {
      this.btnLoading = true;
      let query = {
        formData: this.formData,
      };
      SaveAudit(this.setting.taskOperatorId, query)
        .then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1500,
            onClose: () => {
              this.btnLoading = false;
              this.$emit("close", true);
            },
          });
        })
        .catch(() => {
          this.btnLoading = false;
        });
    },
    submitOrSave() {
      this.formData.status = this.eventType === "submit" ? 1 : 0;
      if (this.eventType === "save") return this.handleRequest();
      this.candidateLoading = true;
      Candidates(0, { formData: this.formData })
        .then((res) => {
          let data = res.data;
          this.candidateLoading = false;
          if (Array.isArray(data) && data.length) {
            this.candidateList = res.data;
            this.candidateVisible = true;
          } else {
            this.$confirm("您确定要提交当前流程吗, 是否继续?", "提示", {
              type: "warning",
            })
              .then(() => {
                this.handleRequest();
              })
              .catch(() => {});
          }
        })
        .catch(() => {
          this.candidateLoading = false;
        });
    },
    handleRequest(candidateList) {
      if (candidateList) this.formData.candidateList = candidateList;
      if (!this.formData.id) delete this.formData.id;
      if (this.eventType === "save") this.btnLoading = true;
      this.allBtnDisabled = true;
      let formMethod = null;
      if (this.setting.formType == 1) {
        formMethod = this.formData.id ? Update : Create;
      } else {
        formMethod = this.formData.id ? DynamicUpdate : DynamicCreate;
      }
      formMethod(this.setting.enCode, this.formData)
        .then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1500,
            onClose: () => {
              if (this.eventType === "save") this.btnLoading = false;
              this.candidateVisible = false;
              this.allBtnDisabled = false;
              this.$emit("close", true);
            },
          });
        })
        .catch(() => {
          if (this.eventType === "save") this.btnLoading = false;
          this.allBtnDisabled = false;
        });
    },
    submitCandidate(data) {
      this.handleRequest(data);
    },
    revoke() {
      this.$prompt("", "撤回流程", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: "请输入撤回原因（选填）",
        inputType: "textarea",
        inputValue: "",
        closeOnClickModal: false,
      })
        .then(({ value }) => {
          this.btnLoading = true;
          Revoke(this.setting.taskId, { handleOpinion: value }).then((res) => {
            this.btnLoading = false;
            this.$message({
              type: "success",
              message: res.msg,
              duration: 1000,
              onClose: () => {
                this.$emit("close", true);
              },
            });
          });
        })
        .catch(() => {
          this.btnLoading = false;
        });
    },
    press() {
      this.$confirm("此操作将提示该节点尽快处理，是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          Press(this.setting.taskId).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
              duration: 1000,
            });
          });
        })
        .catch(() => {});
    },
    recall() {
      this.$prompt("", "撤回审核", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: "请输入撤回原因（选填）",
        inputType: "textarea",
        inputValue: "",
        closeOnClickModal: false,
      })
        .then(({ value }) => {
          Recall(this.setting.taskId, { handleOpinion: value }).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
              duration: 1000,
              onClose: () => {
                this.$emit("close", true);
              },
            });
          });
        })
        .catch(() => {});
    },
    cancel() {
      this.$prompt("", "终止审核不可恢复", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: "请输入终止原因（选填）",
        inputType: "textarea",
        inputValue: "",
        closeOnClickModal: false,
      })
        .then(({ value }) => {
          Cancel(this.setting.taskId, { handleOpinion: value }).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
              duration: 1000,
              onClose: () => {
                this.$emit("close", true);
              },
            });
          });
        })
        .catch(() => {});
    },
    openUserBox(type) {
      this.userBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.userBox.init(true);
      });
    },
    handleTransfer(freeApproverUserId, desc) {
      Transfer(this.setting.taskOperatorId, {
        freeApproverUserId,
        handleOpinion: desc,
      }).then((res) => {
        this.$message({
          type: "success",
          message: res.msg,
          duration: 1000,
          onClose: () => {
            this.$emit("close", true);
          },
        });
      });
    },
    openAssignBox() {
      this.assignVisible = true;
      this.$nextTick(() => {
        this.$refs["assignForm"].resetFields();
      });
    },
    handleAssign() {
      this.$refs["assignForm"].validate((valid) => {
        if (!valid) return;
        Assign(this.setting.taskId, this.assignForm).then((res) => {
          this.$message({
            type: "success",
            message: res.msg,
            duration: 1000,
            onClose: () => {
              this.$emit("close", true);
            },
          });
        });
      });
    },
    handleFreeApproval() {
      this.$refs["freeApproverForm"].validate((valid) => {
        if (valid) {
          let query = {
            handleOpinion: this.reason,
            formData: this.formData,
            enCode: this.setting.enCode,
            signImg: this.signImg,
            copyIds: this.copyIds.join(","),
            handleFiles: this.handleFiles,
            freeApproverType: this.freeApproverForm.freeApproverType,
            freeApproverUserId:
              this.freeApproverForm.freeApproverUserId.join(","),
            counterSign: this.freeApproverForm.counterSign,
          };
          if (this.candidateForm.candidateList.length) {
            let candidateList = {};
            for (let i = 0; i < this.candidateForm.candidateList.length; i++) {
              candidateList[this.candidateForm.candidateList[i].nodeId] =
                this.candidateForm.candidateList[i].value;
            }
            query.candidateList = candidateList;
          }
          const approvalMethod = freeApproval;
          this.approvalBtnLoading = true;
          approvalMethod(this.setting.taskOperatorId, query)
            .then((res) => {
              this.$message({
                type: "success",
                message: res.msg,
                duration: 1000,
                onClose: () => {
                  this.approvalBtnLoading = false;
                  this.visible = false;
                  this.$emit("close", true);
                },
              });
            })
            .catch(() => {
              this.approvalBtnLoading = false;
            });
        }
      });
    },
    handleApproval() {
      this.$refs["candidateForm"].validate((valid) => {
        if (valid) {
          if (this.properties.hasSign && !this.signImg) {
            this.$message({
              message: "请签名",
              type: "error",
            });
            return;
          }
          let query = {
            handleOpinion: this.reason,
            formData: this.formData,
            enCode: this.setting.enCode,
            signImg: this.signImg,
            copyIds: this.copyIds.join(","),
            handleFiles: this.handleFiles,
            customFiled: this.customFiled,
          };
          if (this.candidateForm.candidateList.length) {
            let candidateList = {};
            for (let i = 0; i < this.candidateForm.candidateList.length; i++) {
              candidateList[this.candidateForm.candidateList[i].nodeId] =
                this.candidateForm.candidateList[i].value;
            }
            query.candidateList = candidateList;
          }
          if (this.eventType === "audit" && this.properties.hasFreeApprover) {
            query = { freeApproverUserId: this.handleId, ...query };
          }
          const approvalMethod = this.eventType === "audit" ? Audit : Reject;
          this.approvalBtnLoading = true;
          approvalMethod(this.setting.taskOperatorId, query)
            .then((res) => {
              this.$message({
                type: "success",
                message: res.msg,
                duration: 1000,
                onClose: () => {
                  this.approvalBtnLoading = false;
                  this.visible = false;
                  this.$emit("close", true);
                },
              });
            })
            .catch(() => {
              this.approvalBtnLoading = false;
            });
        }
      });
    },
    handleReset() {
      this.signImg = "";
      this.$nextTick(() => {
        this.$refs.esign && this.$refs.esign.reset();
      });
    },
    handleGenerate() {
      this.$refs.esign
        .generate()
        .then((res) => {
          if (res) this.signImg = res;
        })
        .catch((err) => {
          this.$message({
            message: "请签名",
            type: "warning",
          });
        });
    },
    addComment() {
      this.$refs.comment && this.$refs.comment.showCommentDialog();
    },
    setPageLoad(val) {
      this.loading = !!val;
    },
    setCandidateLoad(val) {
      this.candidateLoading = !!val;
    },
    setLoad(val) {
      this.btnLoading = !!val;
    },
    uploadFile(fileList) {
      this.handleFiles = fileList;
    },
  },
};
</script>
<!-- 解决双滚动条问题 -->

<style lang="scss">
.liucheng {
  margin-top: 15px;
  background-color: #fff;
  .jsbos-el_tabs {
    height: calc(100% - 68px) !important;
  }
}
</style>
<!--  -->
<style lang="scss" scoped>
.sign-main {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;

  .sign-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #dcdfe6;

    .sign-tip {
      color: #a5a5a5;
      font-size: 12px;
    }

    .sign-action {
      display: flex;
      align-items: center;

      .clear-btn,
      .sure-btn {
        margin-left: 5px;
      }
    }
  }

  .sign-box {
    border-top: 0;
    height: 100px;
  }

  .sign-img {
    width: 100%;
  }
}

.flow-form-main {
  el_tabs {
    overflow: hidden;
  }
}

.btn_style {
  position: absolute;
  top: 0px;
  right: 120px;

  z-index: 999;
}
</style>
